<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>无标题文档</title>
    <style type="text/css">
        * {
            padding: 0;
            margin: 0;
            list-style: none;
            border: 0;
        }

        .all {
            width: 500px;
            height: 200px;
            padding: 7px;
            border: 1px solid #ccc;
            margin: 100px auto;
            position: relative;
        }

        .screen {
            width: 500px;
            height: 200px;
            overflow: hidden;
            position: relative;
        }

        .screen li {
            width: 500px;
            height: 200px;
            overflow: hidden;
            float: left;
        }

        .screen ul {
            position: absolute;
            left: 0;
            top: 0px;
            width: 3000px;
        }

        .all ol {
            position: absolute;
            right: 10px;
            bottom: 10px;
            line-height: 20px;
            text-align: center;
        }

        .all ol li {
            float: left;
            width: 20px;
            height: 20px;
            background: #fff;
            border: 1px solid #ccc;
            margin-left: 10px;
            cursor: pointer;
        }

        .all ol li.current {
            background: yellow;
        }

    </style>
    <script type="text/javascript">
        function animate(obj, target) {
            clearInterval(obj.timer);  // 先清除定时器
            var speed = obj.offsetLeft < target ? 15 : -15;  // 用来判断 应该 +  还是 -
            obj.timer = setInterval(function () {
                var result = target - obj.offsetLeft; // 因为他们的差值不会超过5
                obj.style.left = obj.offsetLeft + speed + "px";
                if (Math.abs(result) <= 15)  // 如果差值不小于 5 说明到位置了
                {
                    clearInterval(obj.timer);
                    obj.style.left = target + "px";  // 有5像素差距   我们直接跳转目标位置
                }
            }, 10)
        }

        window.onload = function () {
            // 获取元素
            var box = document.getElementById("all");  // 大盒子
            var ul = document.getElementById("ul");
            var ulLis = ul.children;
            // 操作元素

            // 因为我们要做无缝滚动  ，所以要克隆第一张，放到最后一张后面去
            // a.appendchild(b)   把 b 放到 a 的最后面
            // 1. 克隆完毕
            ul.appendChild(ul.children[0].cloneNode(true));

            // 2. 创建 ol  和  小 li
            console.log(ulLis.length);
            var ol = document.createElement("ol");  // 生成的是ol
            box.appendChild(ol); // 把ol 追加到  box 里面
            for (var i = 0; i < ulLis.length - 1; i++) {
                var li = document.createElement("li");
                li.innerHTML = i + 1;  //  给里面小的li 文字  1 2 3 4 5
                ol.appendChild(li);  // 添加到 ol 里面
            }
            ol.children[0].className = "current";

            //3. 开始动画部分
            var olLis = ol.children;
            for (var i = 0; i < olLis.length; i++) {
                olLis[i].index = i;  // 获得当前第几个小li 的索引号
                olLis[i].onmouseover = function () {
                    for (var j = 0; j < olLis.length; j++) {
                        olLis[j].className = "";  // 所有的都要清空
                    }
                    this.className = "current";
                    animate(ul, -this.index * 500)
                    // 调用动画函数  第一个参数  谁动画     第二个  走多少
                    square = key = this.index;  // 当前的索引号为主
                }
            }
            //  4. 添加定时器
            var timer = null;   // 轮播图的定时器
            var key = 0;  //控制播放张数
            var square = 0; // 控制小方块
            timer = setInterval(autoplay, 3000);  // 开始轮播图定时器
            function autoplay() {
                key++;  // 先 ++
                if (key > ulLis.length - 1)  // 后判断
                {
                    ul.style.left = 0;  // 迅速调回
                    key = 1;  // 因为第6张就是第一张  第6张播放 下次播放第2张
                }
                animate(ul, -key * 500);  // 再执行
                // 小方块
                square++;
                if (square > olLis.length - 1) {
                    square = 0;
                }
                for (var i = 0; i < olLis.length; i++)   // 先清除所有的
                {
                    olLis[i].className = "";
                }
                olLis[square].className = "current";  // 留下当前的
            }

            //last最后  鼠标经过大盒子要停止定时器
            box.onmouseover = function () {
                clearInterval(timer);
            }
            box.onmouseout = function () {
                timer = setInterval(autoplay, 3000);  // 开始轮播图定时器
            }
        }
    </script>

</head>

<body>
<div class="all" id='all'>
    <div class="screen">
        <ul id="ul">
            <li><img src="images/taobao/1.jpg" width="500" height="200"/></li>
            <li><img src="images/taobao/2.jpg" width="500" height="200"/></li>
            <li><img src="images/taobao/3.jpg" width="500" height="200"/></li>
            <li><img src="images/taobao/4.jpg" width="500" height="200"/></li>
            <li><img src="images/taobao/5.jpg" width="500" height="200"/></li>
        </ul>
    </div>

</div>
</body>
</html>
